<template>
  <div class="playListContainer">
    <div class="playList-header">

      <span class="title" @click="changeIsShow">
        {{ tagName?tagName:'精选歌曲' }}
        <i v-if="!isShow" class="iconfont icon-arrow-down" />
        <i v-else class="iconfont icon-arrow-up-bold" />
      </span>

      <ul v-if="clickTagId==989898" class="hotOrNew">
        <li
          v-for="(item,index) in list"
          :key="item"
          :class="{
            active:currentIndex==index
          }"
          @click="changeChoice(index)"
        >{{ item }}</li>
      </ul>
      <ul v-show="isShow" class="playListSelects">
        <li
          class="moren"
          @click="clickMoRen"
        >
          <span>
            <i class="iconfont icon-file-common" />
            默认
          </span>

          <p
            :class="{
              pShow:clickTagId==989898
            }">精选歌单</p>
        </li>

        <li
          v-for="item in tagTitleList"
          :key="item.id"
          class="selectItem"
        >
          <p class="selectHeader">

            <img :src="item.img1" :alt="item.name">
          </p>
          <ul class="tagWrap">
            <li
              v-for="tag in item.data"
              :key="tag.id"
              class="tagItem"
              :class="{
                tagShow:clickTagId==tag.id
              }"
              @click="playListDetail(tag.id,tag.name)"
            >
              {{ tag.name }}
            </li>
          </ul>
        </li>
      </ul>
    </div>
    <ul class="playList-body">

      <li
        v-for="item in playList"
        :key="item.id"
        class="playList-item"
      >
        <div class="cover" @click="toSongDetail(item.id, item.img, item.name)">
          <div class="playWrap" @click="toListen">
            <i
              class="iconfont icon-play1 playIcon"
            />
          </div>
          <img :src="item.img" alt="">
        </div>
        <p class="playName">{{ item.name }}</p>
        <p>
          <i class="iconfont icon-play" />
          {{ item.listencnt?item.listencnt:'' }}</p>
      </li>

    </ul>
    <div class="playList-footer">

      <el-pagination
        class="abcdef"
        size="medium"
        background
        layout="prev, pager, next"
        :total="total"
        @current-change="changePage"
      />
    </div>
  </div>
</template>

<script>
import { reqGetPlayList, reqGetTagPlayList, reqGetTagPlayListDetail } from '@/api/songList'
export default {


  name: 'SongList',
  data() {
    return {
      list: ['最新', '最热'],
      currentIndex: 0,
      // 存储歌曲列表的数据
      playList: [],
      Order: '',
      // 页面中共的列表数据数量
      total: 1,
      // 当前是哪页
      pn: 1,
      // 当前页面展示几条数据
      rn: 30,
      // 存储标签的信息
      tagTitleList: [],
      // 控制下拉框显示隐藏
      isShow: false,
      // 当前点击的tag的id
      clickTagId: 989898,
      // 当前tag的名称
      tagName: ''
    }
  },
  mounted() {
    this.getPlayList()
  },
  methods: {
    // 封装一个发送请求的函数
    async getPlayList() {
      const result = await reqGetPlayList(this.Order, this.pn)
      // console.log(result)
      this.total = result.data.total
      this.pn = result.data.pn
      this.playList = result.data.data
    },
    // 切换最新最热
    changeChoice(index) {
      // console.log(index)
      this.currentIndex = index
      if (this.currentIndex === 0) {
        this.Order = 'new'
        this.getPlayList()
        // console.log(this.playList)

      } else {
        this.Order = 'hot'
        this.getPlayList()
        // console.log(this.playList)
      }
    },
    // 点击切换页面重新发送请求

    changePage(index) {
      // console.log(event)
      // 给当前页面重新赋值
      this.pn = index
      // console.log(this.pn)
      this.getPlayList()
      window.scrollTo(0, 0)
    },
    // 点击精选歌单的时候,控制下拉框是否显示
    async changeIsShow () {

      const result = await reqGetTagPlayList()
      // console.log(result)
      this.tagTitleList = result.data
      this.isShow = !this.isShow
    },
    // 点击分类标签 获取具体的分类的歌单列表

    async playListDetail(tagId, name) {
      const result = await reqGetTagPlayListDetail(tagId)
      this.playList = result.data.data
      // 存储一下点击的tag的id
      this.clickTagId = tagId
      this.tagName = name
      // 隐藏下拉框
      this.isShow = false
    },
    // 点击默认的标签

    async clickMoRen() {
      this.tagName = '精选歌曲'
      this.getPlayList()
      this.clickTagId = 989898
      // 隐藏下拉框
      this.isShow = false
    },
    // 点击播放图标
    toListen() {
      console.log(111)
    },
    // 点击跳转到歌单详情页
    toSongDetail(id, img, name) {
      this.$store.dispatch('songList/getSongList', id)
      this.$store.commit('songList/SAVE_SONG_INFO', { img, name })
      this.$router.push('/songDetail')
      this.$bus.$emit('isShowHeader', false)
    }
  }

}
</script>

<style lang="less">
.abcdef {
  .btn-prev,.btn-next{
       width: 42px;
       height: 42px;
    }
  .el-pager{
    .number {
        width: 42px;
        height: 42px;
        line-height: 42px;
        text-align: center;
        color: #333;
        background-color: #ffe443;
    }
    .btn-quicknext,.btn-quickprev{
        width: 42px;
        height: 42px;
        line-height: 42px;
        text-align: center;
    }
  }
}

*{
  margin:0;
  padding:0;
}
ul li {
  list-style: none;
}
  .playListContainer{
    width: 1288px;
    margin: 0 auto;
    margin-bottom: 20px;
    margin-top:50px;
    // .fa-play:before{
    //   background-color:transparent;
    // }
    .playList-header{
      position: relative;
      height: 30px;
      display: flex;
      align-items: center;
      font-size: 14px;
      .playListSelects{
        position: absolute;
        left:0;
        top:44px;
        width: 65.57%;
        max-height:648px;
        // overflow:scroll;
        background-color: #fff;
        z-index:100000;
        box-shadow:0 4px 20px 0 rgb(65 67 70 / 8%);
        padding: 30px 10px 0 36px;
        box-sizing: border-box;

        .moren{
          font-weight: 600;
          font-size:14px;
          p{
            margin:5px 20px;
            font-weight: normal;
            width: 92px;
            height: 32px;
            line-height:32px;
            text-align: center;
            background-color: #f7f7f7;
            border-radius: 16px;
          }
           .pShow{
            background-color: #ffe443;
          }
        }
        .tagWrap{
          display: flex;
          flex-wrap: wrap;
          .tagItem{
            // width: 28px;
            height: 20px;
            margin:0px 10px 10px 0;
            padding:6px 18px;
            background-color: #f7f7f7;
            border-radius: 16px;
            cursor: pointer;
            line-height: 20px;
            text-align: center;
          }
          .tagItem:hover{
            background-color: #ffe443;
          }
          .tagShow{
            background-color: #ffe443;
          }
        }
      }
      .title{
        color: #333;
        font-size: 22px;
        font-weight: 600;
        cursor:pointer;
        margin-right: 36px;
        .icon-arrow-down,.icon-arrow-up-bold{
          font-size: 22px;
          font-weight: 600;
        }
      }
      .hotOrNew{
        display: flex;
        li{
            width: 28px;
            height: 20px;
            margin-right: 34px;
            box-sizing: border-box;
        }
      }
      .active{
        font-weight: 600;
        border-bottom: 4px solid #ffe443;
      }
    }
    .playList-body{
      margin-top:30px;
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;

        li{
          margin-bottom: 20px;
          overflow: hidden;
          .cover{
            position: relative;
             width: 250px;
             height: 250px;
             overflow: hidden;
             background-color: transparent;
                .playWrap{
                  position: absolute;
                  top:50%;
                  left:50%;
                  transform: translate(-50%,-50%);
                  width: 66px;
                  height: 66px;
                  line-height:65px;
                  text-align:center;
                  background-color: #fff;
                  z-index: 11111111;
                  border-radius: 50%;
                  display: none;
                  .playIcon{
                    font-size: 35px;
                  }
                }
          }
          .cover:hover .playWrap{
            display: inline-block;
          }
           img{
            width: 250px;
            height: 250px;
            transition: all 0.5s;
            border-radius:10px;
          }
           img:hover {
             transform: scale(1.1);
             filter: grayscale(18%);
          }
          p{
            width: 250px;
            height: 25px;
            margin-top:10px;
          }
          .playName{
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
          }
        }

    }
      .playList-footer{
        display: flex;
        justify-content: center;
       .el-pagination.is-background .el-pager li:not(.disabled).active{
         background-color: #ffe443;
       }
      }

  }
</style>
